//index.js
//获取应用实例
Page({
  data: {
    winHeight:'100%',
    toView:'',
    nowstatus:'',
    currentTab: '',
    productBoxTop: '',
    commentBoxTop: '',
    infoBoxTop: '',
    infoBox2Top:'',
    infoBox3Top: '',
    names:1,
  },
  onLoad: function (options) {
    wx.getSystemInfo({ 
      // 获取当前设备的宽高，文档有
          success: (res) => {
            this.setData({
              windowHeight: res.windowHeight,
              windowWidth: res.windowWidth
            })
          },
        })
    let that=this;
    wx.getSystemInfo({
      success: function(res) {
        console.log(res)
        that.setData({
          winHeight: res.windowHeight*2 - (res.windowWidth * 90 / 750) + 'rpx'
        })
      },
    }),
      wx.createSelectorQuery().select('#productBox').boundingClientRect(res => { //获取评论距离页面顶部高度
        that.setData({
          productBoxTop: res.top
        })
      }).exec()
    wx.createSelectorQuery().select('#commentBox').boundingClientRect(res => { //获取评论距离页面顶部高度
      that.setData({
        commentBoxTop: res.top
      })
    }).exec()
    wx.createSelectorQuery().select('#infoBox').boundingClientRect(res => { //获取详情部分距离页面顶部高度
      that.setData({
        infoBoxTop: res.top
      })
    }).exec()
    wx.createSelectorQuery().select('#infoBox2').boundingClientRect(res => { //获取详情部分距离页面顶部高度
      that.setData({
        infoBox2Top: res.top
      })
    }).exec()
    wx.createSelectorQuery().select('#infoBox3').boundingClientRect(res => { //获取详情部分距离页面顶部高度
      that.setData({
        infoBox3Top: res.top
      })
    }).exec()
    
  },
 
  toViewClick:function(e){
    this.setData({
      toView: e.target.dataset.hash,
      nowstatus: e.target.dataset.hash,
      currentTab:e.target.dataset.current
    })
    var current = e.target.dataset.current; //获取当前tab的index
    // 导航tab共5个，获取一个的宽度
    var tabWidth = this.data.windowWidth / 5;
 
    this.setData({
      tabScroll: (current - 2) * tabWidth//使点击的tab始终在居中位置
    })
  },
  onPageScroll: function (e) {
    var that = this;
    if (e.detail.scrollTop > that.data.productBoxTop - 360 && e.detail.scrollTop < that.data.commentBoxTop - 361) {
      var tabWidth = this.data.windowWidth / 5;
 
      this.setData({
        nowstatus: 'productBox',
        currentTab: 0,
        tabScroll: (0 - 2) * tabWidth,
      })
    }
    if (e.detail.scrollTop > that.data.commentBoxTop - 360 && e.detail.scrollTop < that.data.infoBoxTop - 361) {
      var tabWidth = this.data.windowWidth / 5;
      this.setData({
        nowstatus: 'commentBox',
        currentTab: 1,
        tabScroll: (1 - 2) * tabWidth,
      })
    }
    if (e.detail.scrollTop > that.data.infoBoxTop - 360 && e.detail.scrollTop < that.data.infoBox2Top - 361) {
 
      var tabWidth = this.data.windowWidth / 5;
      this.setData({
        nowstatus: 'infoBox',
        currentTab: 2,
        tabScroll: (2 - 2) * tabWidth,
      })
    }
    if (e.detail.scrollTop > that.data.infoBox2Top - 360 && e.detail.scrollTop < that.data.infoBox3Top - 361) {
 
      var tabWidth = this.data.windowWidth / 5;
      this.setData({
        nowstatus: 'infoBox2',
        currentTab: 3,
        tabScroll: (3 - 2) * tabWidth,
      })
    }
    if (e.detail.scrollTop > that.data.infoBox3Top - 360) {
 
      var tabWidth = this.data.windowWidth / 5;
      this.setData({
        nowstatus: 'infoBox3',
        currentTab: 4,
        tabScroll: (4 - 2) * tabWidth,
      })
    }
   
  },
})